<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人力资源管理系统 - 登录</title>
    <!-- Element UI CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 自定义登录页面布局样式 -->
    <link rel="stylesheet" href="/static/css/login.css" />
  </head>
  <body>
    <!-- 顶部导航栏，白底，系统名称居左 -->
    <header class="login-header">
      <div class="login-header-content">
        <img
          src="https://cdn.jsdelivr.net/gh/element-plus/element-plus@2.3.7/docs/public/images/element-plus-logo.svg"
          alt="LOGO"
          class="login-logo"
        />
        <span class="login-title">人力资源管理系统</span>
      </div>
    </header>
    <!-- 中间背景和登录表单 -->
    <main class="login-main">
      <div class="login-main-left"></div>
      <div id="app" class="login-form-wrapper">
        <el-form
          :model="formData"
          ref="loginForm"
          label-width="80px"
          @submit.native.prevent="handleLogin"
        >
          <h2 class="login-form-title">欢迎登录</h2>
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="formData.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formData.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <div class="login-form-row">
            <el-checkbox v-model="formData.rememberMe">记住我</el-checkbox>
            <a href="/auth/forgot" class="login-link">忘记密码？</a>
          </div>
          <div class="login-form-row login-form-actions">
            <el-button
              type="primary"
              :loading="loading"
              @click="handleLogin"
              style="width: 220px"
              >登录</el-button
            >
            <a href="/auth/register" class="login-link">注册账号</a>
          </div>
        </el-form>
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="login-footer">
      &copy; 2025 人力资源管理系统 | 技术支持：IT部门
    </footer>
    <!-- Element UI & Vue & Axios -->
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/request.js"></script>
    <script src="/static/js/api/auth.js"></script>
    <script src="/static/js/rememberMe.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            formData: {
              username: "",
              password: "",
              rememberMe: false,
            },
            loading: false,
          };
        },
        methods: {
          async handleLogin() {
            this.loading = true;
            
            // 处理记住我功能
            if (this.formData.rememberMe) {
              window.rememberMe.set(this.formData.username, this.formData.password);
            } else {
              window.rememberMe.clear();
            }
            
            try {
              await authAPI.login(this.formData);
              this.$message.success("登录成功！");
              setTimeout(() => window.location.href = "/", 1500);
            } catch (error) {
              this.$message.error(error.response?.data?.msg || "登录失败");
            } finally {
              this.loading = false;
            }
          },
        },
        mounted() {
          // 页面加载时自动填充cookie
          const info = window.rememberMe.get();
          if (info.username && info.password) {
            this.formData.username = info.username;
            this.formData.password = info.password;
            this.formData.rememberMe = true;
          }
        },
      });
    </script>
  </body>
</html>
